<template>
  <div class="container">
    <div class="content">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-input
          v-model="searchQuery"
          placeholder="搜索视频模板..."
          class="search-input"
          prefix-icon="el-icon-search"
        />
        <el-button 
          type="primary" 
          class="create-btn"
          @click="handleCreate">
          <i class="el-icon-plus"></i>
          开始创作
        </el-button>
      </div>

      <!-- 标签筛选区 -->
      <div class="tag-filter">
        <el-tag
          v-for="tag in tags"
          :key="tag.id"
          :type="selectedTags.includes(tag.id) ? 'primary' : ''"
          class="tag-item"
          @click="toggleTag(tag.id)"
        >
          {{ tag.name }}
        </el-tag>
      </div>

      <!-- 视频卡片网格 -->
      <div class="video-grid">
        <div
          v-for="video in filteredVideos"
          :key="video.id"
          class="video-card"
          @mouseenter="handleMouseEnter(video.id)"
          @mouseleave="handleMouseLeave"
        >
          <div class="video-thumbnail">
            <img
              :src="video.cover"
              :alt="video.title"
              class="thumbnail-image"
            />
            <video
              v-if="hoveredVideo === video.id"
              :ref="`video-${video.id}`"
              :src="video.videoUrl"
              class="video-player"
              muted
              loop
            ></video>
            <div class="duration-tag">
              {{ video.duration }}
            </div>
          </div>
          <div class="video-info">
            <h3 class="video-title">{{ video.title }}</h3>
            <p class="video-desc">{{ video.description }}</p>
            <div class="video-tags">
              <el-tag
                v-for="tagId in video.tags.slice(0, 3)"
                :key="tagId"
                size="small"
                class="tag-item"
              >
                {{ getTagName(tagId) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedTags: [],
      hoveredVideo: null,
      tags: [
        { id: 1, name: '商业' },
        { id: 2, name: '教育' },
        { id: 3, name: '营销' },
        { id: 4, name: '社交媒体' },
        { id: 5, name: '产品介绍' },
        { id: 6, name: '企业宣传' },
        { id: 7, name: '短视频' },
        { id: 8, name: '直播带货' },
      ],
      videos: [
       {
       id: 1,
       title: '企业品牌故事叙述模板',
       description: '专业的企业形象展示模板，突出企业文化与价值观，适合品牌故事演绎与企业介绍。',
       cover: 'https://ai-public.mastergo.com/ai/img_res/6f56f97710ada12f3778daf09cf25c42.jpg',
       videoUrl: 'https://example.com/video1.mp4',
       duration: '01:30',
       tags: [1, 6],
       },
       {
       id: 2,
       title: '电商产品展示专业版',
       description: '突出产品细节的电商视频模板，完美展示产品特性，提升转化率。',
       cover: 'https://ai-public.mastergo.com/ai/img_res/990b4fb08b989644bb0f59530c475a92.jpg',
       videoUrl: 'https://example.com/video2.mp4',
       duration: '00:45',
       tags: [3, 8],
       },
       {
       id: 3,
       title: '教育课程精品模板',
       description: '专业的在线教育课程模板，清晰的知识传递，适合各类教育内容制作。',
       cover: 'https://ai-public.mastergo.com/ai/img_res/15bfba20d87bbe98e460b38c2f3dcd73.jpg',
       videoUrl: 'https://example.com/video3.mp4',
       duration: '02:15',
       tags: [2],
       },
       {
       id: 4,
       title: '社交媒体营销动态模板',
       description: '时尚动感的社交媒体视频模板，吸引眼球，提升品牌影响力。',
       cover: 'https://ai-public.mastergo.com/ai/img_res/302ba50b761da3319842d339d8a965b7.jpg',
       videoUrl: 'https://example.com/video4.mp4',
       duration: '01:00',
       tags: [3, 4, 7],
       },
       {
       id: 5,
       title: '产品发布会专业模板',
       description: '高端大气的产品发布会视频模板，突出产品价值，提升品牌形象。',
       cover: 'https://ai-public.mastergo.com/ai/img_res/6c3adefb16e4109db45d67a6070a5c8e.jpg',
       videoUrl: 'https://example.com/video5.mp4',
       duration: '03:00',
       tags: [1, 5],
       },
       {
       id: 6,
       title: '直播间氛围布置模板',
       description: '专业的直播间场景模板，营造良好的直播氛围，提升观众互动。',
       cover: 'https://ai-public.mastergo.com/ai/img_res/c2e2add9df1527ea5445c317fa2d4acc.jpg',
       videoUrl: 'https://example.com/video6.mp4',
       duration: '01:45',
       tags: [7, 8],
       },
      ]
    }
  },
  computed: {
    filteredVideos() {
      let result = this.videos
      if (this.selectedTags.length > 0) {
        result = result.filter(video =>
          video.tags.some(tag => this.selectedTags.includes(tag))
        )
      }
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(video =>
          video.title.toLowerCase().includes(query) ||
          video.description.toLowerCase().includes(query)
        )
      }
      return result
    }
  },
  methods: {
    toggleTag(tagId) {
      const index = this.selectedTags.indexOf(tagId)
      if (index === -1) {
        this.selectedTags.push(tagId)
      } else {
        this.selectedTags.splice(index, 1)
      }
    },
    handleMouseEnter(videoId) {
      this.hoveredVideo = videoId
      this.$nextTick(() => {
        const video = this.$refs[`video-${videoId}`]?.[0]
        if (video) video.play()
      })
    },
    handleMouseLeave() {
      if (this.hoveredVideo !== null) {
        const video = this.$refs[`video-${this.hoveredVideo}`]?.[0]
        if (video) {
          video.pause()
          video.currentTime = 0
        }
      }
      this.hoveredVideo = null
    },
    getTagName(tagId) {
      return this.tags.find(t => t.id === tagId)?.name || ''
    },
    handleCreate() {
      // 处理创作按钮点击
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f8fafc;
}

.content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
}

.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  gap: 16px;
}

.search-input {
  flex: 1;
  max-width: 640px;
}

.create-btn {
  white-space: nowrap;
}

.tag-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.tag-item {
  cursor: pointer;
  border-radius: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.video-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.video-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
}

.thumbnail-image,
.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
}

.duration-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 16px;
}

.video-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.video-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .content {
    padding: 16px;
  }
  
  .video-grid {
    grid-template-columns: 1fr;
  }
}
</style>